<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id='btn'>你好</button>
    <script>
        /*
        定义：一个实例，全局使用
        解决：频繁创建销毁
        */

        // 单例设计模式(原始模块化思想，惰性函数)
        let a = (function () {
            let aa = function () {}
            return {
                aa
            }
        })()
        let b = (function () {
            let bb = function () {
                a.aa()
            }
            return {}
        })()

        // //不使用单例模式
        // let createLog = (
        //     function () {
        //         div = document.createElement('div')
        //         div.innerHTML = '测试'
        //         div.style.display = 'none'
        //         document.body.append(div)
        //         return div
        //     }
        // )()

        // document.getElementById('btn').onclick = function () {
        //     createLog.style.display = 'block'
        // }

        //使用单例模式
        let createLog = (
            function () {
                let div
                return function () {
                    if (!div) {
                        div = document.createElement('div')
                        div.innerHTML = '测试'
                        div.style.display = 'none'
                        document.body.append(div)
                    }
                    return div
                }
            }
        )()
        document.getElementById('btn').onclick = function () {
            let usePulgin = createLog()
            usePulgin.style.display = 'block'
        }



        // 柯里化函数
        // 利用闭包机制，将一些事情先处理好，等后期需要用的时候直接拿来用即可
        // let num = 0;

        // let count = function (val) {
        //     return num += val
        // }
        // count(1);
        // count(2)
        // count(3)
        // console.log(num) //6




        let count2 = function (val, val2, val3) {
            console.log(val, val2, val3)
        }
        count2(1, 2, 3)

        //改动下 柯里化
        let count3 = function (val) {
            return function (val2) {
                return function (val3) {
                    console.log(val, val2, val3)
                }
            }
        }
        count3(1)(2)(3)


        //封装一个柯里化
        let f1 = function (x) {
            return x + 10
        }

        let f2 = function (x) {
            return x * 10
        }
        let f3 = function (x) {
            return x / 10
        }

        console.log(f3(f2(f1(5)))) //15

        function compose(...funs) {
            return function proxy(...agrs) {
                let len = funs.length
                if (len === 0) {
                    return agrs[0]
                }
                if (len === 1) {
                    return funs[0](...agrs)
                }
                return funs.reduce((x, y) => {
                    return typeof x === 'function' ? y(x(...agrs)) : y(x)
                })

            }
        }
        console.log(compose()(5))
        console.log(compose(f1)(5))
        console.log(compose(f1, f2)(5))
        console.log(compose(f1, f2, f3)(5))





        // 函数调用扁平化 compose
        // let f1 = function (x) {
        //     return x + 1
        // }
        // let f2 = function (x) {
        //     return x - 1
        // }
        // let f3 = function (x) {
        //     return x + 10
        // }
        // console.log(f3(f2(f1(1)))) //11

        // function compose(...fn) { //fn传递的函数集合
        //     return function proxy(...agr) { //第一次调用函数
        //         fn
        //     }
        // }
    </script>

</body>

</html>